<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'margin-top': safeTop + 'px'}">
			<image class="back-img" src="/static/close1.png" @click="back()"></image>
			<view class="input-box">
				<image class="input-img" src="/static/searchPic.png"></image>
				<input class="search-input" placeholder="搜索活动名称" v-model="params.keyword" />
			</view>
			<view class="search-button" @click="search()">搜索</view>
		</view>
		<scroll-view class="search-list" scroll-y="true" :style="{'height': `calc(100vh - ${safeTop}px - 86rpx)`}">
			<view class="search-box" v-if="!isResult && history.length > 0">
				<view class="title-row">
					<view class="box-title">历史搜索</view>
					<image class="delete-img" src="/static/searchLogDelete.png"></image>
				</view>
				<view class="box-list">
					<view class="box-item" v-for="item of history">{{ item }}</view>
				</view>
			</view>
			<view class="search-box" v-if="!isResult && hot.length > 0">
				<view class="box-title">热门搜索</view>
				<view class="box-list">
					<view class="box-item" v-for="item of hot">{{ item }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeTop: 0,
				history: [],
				hot: [],
				isResult: false,
				searchRes: [],
				params: {
					keyword: '测',
					pageSize: 50,
					pageNum: 1
				}
			};
		},
		onLoad() {
			this.safeTop = this.$safeTop;
			this.history = this.$history;
			this.getHotSearch();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			getHotSearch() {
				this.$apis.hotSearch({}).then(res => {
					if (res.code === 0) {
						this.hot = res.data;
					}
				});
			},
			search() {
				if (this.params.keyword) {
					this.$apis.searchActivity(this.params).then(res => {
						if (res.code === 0) {
							this.history.push(this.params.keyword);
							if (this.history.length > 10) {
								this.history.shift();
								uni.setStorage({
									key: 'history',
									data: this.history.join(',')
								})
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		
		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.back-img {
				width: 36rpx;
				height: 36rpx;
				margin-left: 32rpx;
				z-index: 999;
			}
			
			.input-box {
				width: 540rpx;
				height: 80rpx;
				background: #F6F7F9;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				
				.input-img {
					width: 36rpx;
					height: 36rpx;
					margin: 0 22rpx;
				}
				
				.search-input {
					width: 400rpx;
				}
			}
			
			.search-button {
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				margin-right: 32rpx;
			}
		}
		
		.search-list {
			.search-box {
				width: calc(100vw - 96rpx);
				padding: 48rpx;
				
				.title-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.delete-img {
						width: 32rpx;
						height: 34rpx;
					}
				}
				
				.box-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
				
				.box-list {
					margin-top: 32rpx;
					width: 100%;
					
					.box-item {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						padding: 12rpx 28rpx;
						border: 32rpx;
						margin-right: 16rpx;
						display: inline-block;
						background: #F6F7F9;
						margin-bottom: 16rpx;
					}
				}
			}
		}
	}
</style>
